<template>
	<view class="box">
		<view>
			<view class="livebox">
				<view class="live-one"></view>
				<text class="live-cover">本次直播封面</text>
			</view>
			<view class="Live-as-a-whole">
				<view class="ofthecovertw" @click="liveImg">
					<image class="ofthecover-one" src="../../../static/khtp.png" v-if="tempFilePaths == ''"></image>
					<view class="ofthecover-to" v-if="tempFilePaths == ''">+上传直播封面</view>
					<image class="live-img-one" :src="tempFilePaths" mode="aspectFill"></image>
				</view>
				<view class="ofthecovertwshare" @click="liveShareImg">
					<image class="ofthecover" src="../../../static/khtp.png" v-if="liveShareImgUrl == ''"></image>
					<view class="ofthecoverone" v-if="liveShareImgUrl == ''">+上传分享图片</view>
					<image class="live-img" :src="liveShareImgUrl" mode="aspectFill"></image>
				</view>
			</view>
			<!-- <view class="livebox">
                    <view class="live-one"></view>
                    <text class="live-cover">分享图片</text>
                </view> -->

			<view class="livebox">
				<view class="live-one"></view>
				<text class="live-cover">本次直播主题</text>
			</view>
			<view class="Livetheme-one"><textarea class="Livetheme-tow" @change="titleChange" v-model="title" placeholder="请输入直播主题,限17字" maxlength="17"></textarea></view>
			<view class="Livetime">
				<view class="Livetimeone"></view>
				<view class="Livetimetow">直播开播时间</view>
				<view class="LivetimeThesolidline"></view>
				<view class="Thestarttime">
					开始时间:
					<picker mode="date" class="uni-input" style="width: 30%;" :value="data.startDate" @change="dateStartChange">
						<view>{{ data.startDate }}</view>
					</picker>
					<picker mode="time" class="uni-inputone" :value="data.startTime" @change="timeStartChange">
						<view>{{ data.startTime }}</view>
					</picker>
				</view>
				<view class="LivetimeThesolidline"></view>
				<view class="Thestarttime">
					结束时间:
					<picker mode="date" class="uni-input" style="width: 30%;" :value="data.endDate" @change="dateEndChange">
						<view>{{ data.endDate }}</view>
					</picker>
					<picker mode="time" class="uni-inputone" :value="data.endTime" @change="timeEndChange">
						<view>{{ data.endTime }}</view>
					</picker>
				</view>
			</view>
			<view class="Broadcastinformation">
				<text class="Broadcastname">直播昵称</text>
				<view class="Broadcastportrait"><image class="Broadcastportraitimg" src="../../../static/portrait.png"></image></view>
				<view>
					<text class="Theusernickname">
						<text style="color:#FF5C46;">*</text>
						用户昵称:
					</text>
					<input class="Theusernickinput" v-model="anchorName" type="text" style="padding-left:15px;box-sizing: border-box;" maxlength="11" placeholder="请输入相关昵称" />
				</view>
				<view>
					<text class="WeChatID">
						<text style="color:#FF5C46 ;">*</text>
						微信号:
					</text>
					<input class="pleaseWeChatID" v-model="anchorWechat" type="text" style="padding-left:15px;box-sizing: border-box;font-size: 30upx;" placeholder="请输入相关微信" />
					<text class="meWeChatID" @click="check">
						哪个是自己的微信号？
						<text>点击查看</text>
					</text>
				</view>
			</view>
		</view>
		<view class="courseone" v-if="ischeck">
			<text class="wxme">第1步，返回微信-点击"我"</text>
			<image class="WeChatguideimgone" src="../../../static/2.png"></image>
			<text class="Thesecondstep">第2步，复制“昵称下的微信号”</text>
			<image class="WeChatguideimg" src="../../../static/1.png"></image>
            <!-- #ifdef MP-WEIXIN -->
            <text class="wxme">若未在“小程序直播”小程序进行实名认证，需要先前往“小程序直播”小程序进行，</text><text class="wxme" style="color: #007AFF;" @click="moveToAppletlive">点击立即前往</text>
            <!-- #endif -->
            <!-- #ifdef H5 -->
            <text class="wxme">若未在“小程序直播”小程序进行实名认证，需要先前往“小程序直播”小程序进行认证。可直接在微信上搜索“小程序直播”，如下图所示。</text>
            <image class="searchLiveImg" src="../../../static/searchLiveApplet.jpg"></image>
            <!-- #endif -->
		</view>
		<view class="Applyforlivebox">
            <button class="Applybutton" @click="Applyforastudiotoone">立即申请直播间</button>
        </view>
	</view>
</template>
<script>
import { uploadFile } from '@/common/sliossone.js';
export default {
	data() {
		return {
			ischeck: false,
			themeTiele: '',
			liveShareImgUrl: '',
			tempFilePaths: '',
			title: '',
			anchorName: '',
			anchorWechat: '',
			Time: '',
			Timedata: '',
			Nicknamecorrecterror: true,
			Myheadisone: '',
			ytd: '',
			vehicle: '',
			data: {
				start_date: '',
				end_date: '',
				startDate: '',
				startTime: ''
			},
			list: {
				start_date: '',
				end_date: '',
				course_msg: ''
			},
			endAllTime: '', //结束时间 毫秒
			startAllTime: '' //开始时间 毫秒
		};
	},
	onShow() {},
	onLoad() {
		this.LoadTime();
	},
	methods: {
		check() {
			this.ischeck = !this.ischeck;
			console.log('1111111111111');
		},
		LoadTime() {
			let time = new Date();
			this.y = time.getFullYear();
			this.m = time.getMonth() + 1;
			this.d = time.getDate();
			this.h = time.getHours();
			this.min = time.getMinutes();
			this.sec = time.getSeconds();
			if (this.m < 10) {
				this.m = '0' + this.m;
			}
			if (this.h < 10) {
				this.h = '0' + this.h;
			}
			if (this.min < 10) {
				this.min = '0' + this.min;
			}
			if (this.d < 10) {
				this.d = '0' + this.d;
			}
			if (this.sec < 10) {
				this.sec = '0' + this.sec;
			}
			this.data.startTime = `${this.h}:${this.min}`;
			this.data.endTime = `${this.h}:${this.min}`;
			this.data.startDate = `${this.y}/${this.m}/${this.d}`;
			this.data.endDate = `${this.y}/${this.m}/${this.d}`;
			this.list.actFormMsg = this.$store.state.actForm;
			this.list.start_date = `${this.data.startDate} ${this.data.startTime}`;
			this.list.end_date = `${this.data.endDate} ${this.data.endTime}`;
			this.startAllTime = new Date(this.list.start_date).getTime();
			this.endAllTime = new Date(this.list.end_date).getTime();
			console.log('this.data------------->', this.data);
			console.log('活动开始时间  毫秒', this.startAllTime);
			console.log('活动开始结束  毫秒', this.endAllTime);
			if (this.list.course_msg.length != 0) {
				this.list.course_msg[this.courseId].all_salesroom = this.$store.state.joinActShopID;
				this.list.course_msg[this.courseId].shopName = this.$store.state.joinActShopName;
			}
		},

		//主题图片
		liveImg() {
			uni.chooseImage({
				count:1,
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				success: res => {
					// for(let i=0;i<res.tempFilePaths.length;i++){
					uni.getImageInfo({
						src: res.tempFilePaths[0],
						success: image => {
							console.log(res, 'image----------->', image);
							uni.showLoading({
								title: '图片上传中...'
							});
							uploadFile(res.tempFilePaths[0]).then(res => {
								this.tempFilePaths = res.data.url;
								console.log('直播背景图', res.data.url);
								uni.hideLoading();
							});
						}
					});
					// }
				}
			});
		},
		// 上传分享图片
		liveShareImg() {
			uni.chooseImage({
				count:1,
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				success: res => {
					// for(let i=0;i<res.tempFilePaths.length;i++){
					uni.getImageInfo({
						src: res.tempFilePaths[0],
						success: image => {
							console.log('image----------->', image);
							uni.showLoading({
								title: '图片上传中...'
							});
							uploadFile(res.tempFilePaths[0]).then(res => {
								this.liveShareImgUrl = res.data.url;
								console.log('直播背景图', res.data.url);
								uni.hideLoading();
							});
						}
					});
					// }
				}
			});
		},

		titleChange() {},

		// 刷新时间
		verifyTime() {
			console.log('正在校验时间');
			if (this.startAllTime > this.endAllTime) {
				uni.showToast({
					title: '开始时间不能早于结束时间',
					icon: 'none'
				});
				return false;
			} else if (this.endAllTime - this.startAllTime <= 1800000) {
				uni.showToast({
					title: '开播时间和结束时间间隔不得短于30分钟',
					icon: 'none'
				});
			} else if (this.endAllTime - this.startAllTime > 86400000) {
				uni.showToast({
					title: '开播时间和结束时间间隔不得超过24小时',
					icon: 'none'
				});
			} else if (this.startAllTime < new Date().getTime() + 600000) {
				uni.showToast({
					title: '开播时间需要在当前时间的十分钟后',
					icon: 'none'
				});
			} else if (this.startAllTime > new Date().getTime() + 15552000000) {
				uni.showToast({
					title: '开播时间开始时间不能在6个月后',
					icon: 'none'
				});
			}
		},
		time(time = +new Date()) {
			var date = new Date(time + 8 * 3600 * 1000); // 增加8小时
			return date
				.toJSON()
				.substr(0, 16)
				.replace('T', ' ');
		},

		//点击更换时间
		dateStartChange(e) {
			let str = e.target.value.toString().replace('-','/').replace('-','/');
			this.data.startDate = str;
			console.log(str,'----------------------');
			this.list.start_date = `${this.data.startDate} ${this.data.startTime}`;
			this.startAllTime = new Date(this.list.start_date).getTime();
		},
		timeStartChange(e) {
			let str = e.target.value.toString();
			this.data.startTime = str;
			this.list.start_date = `${this.data.startDate} ${this.data.startTime}`;
			this.startAllTime = new Date(this.list.start_date).getTime();
		},
		dateEndChange(e) {
			let str = e.target.value.toString().replace('-','/').replace('-','/');
			this.data.endDate = str;
			console.log(str,'----------------------');
			this.list.end_date = `${this.data.endDate} ${this.data.endTime}`;
			this.endAllTime = new Date(this.list.end_date).getTime();
			// #ifdef H5
			this.$forceUpdate(); //H5端结束时间数据渲染不同步，使用$forceUpdate方法强制渲染
			// #endif
		},
		timeEndChange(e) {
			let str = e.target.value.toString();
			this.data.endTime = str;
			this.list.end_date = `${this.data.endDate} ${this.data.endTime}`;
			this.endAllTime = new Date(this.list.end_date).getTime();
			// #ifdef H5
			this.$forceUpdate(); //H5端结束时间数据渲染不同步，使用$forceUpdate方法强制渲染
			// #endif
		},
		moveToAppletlive() {
			wx.navigateToMiniProgram({
				appId: 'wxcbbd86b156ae4441'
			});
		},
        // 小程序直播跳转
        toLiveApp(){

            this.moveToAppletlive();

        },
		Applyforastudiotoone() {
			let data = {
				token: this.$store.getters.getToken,
				account_id: this.$store.getters.getUserId,
				name: this.title,
				coverImg: this.tempFilePaths,
				startTime: this.startAllTime / 1000,
				endTime: this.endAllTime / 1000,
				anchorName: this.anchorName,
				anchorWechat: this.anchorWechat,
				shareImg: this.liveShareImgUrl,
				type: 0,
				screenType: 0,
				closeLike: 0,
				closeGoods: 0,
				closeComment: 0
			};

			this.$api.wx_liveplayer_add(data).then(res => {
				if (res.status) {
					uni.showToast({
						title: '申请成功',
						icon: 'none',
						duration: 2000
					});
					setTimeout(function() {
						uni.redirectTo({
							url: '../golive/golive'
						});
					}, 1000);
				} else {
					if (data.coverImg == '') {
						uni.showToast({
							icon: 'none',
							title: '请上传直播封面'
						});
					} else if (data.liveShareImg == '') {
						uni.showToast({
							icon: 'none',
							title: '请上传分享图片'
						});
					} else if (data.name == '') {
						uni.showToast({
							icon: 'none',
							title: '请输入直播主题'
						});
					} else if (this.startAllTime > this.endAllTime) {
						uni.showToast({
							title: '开始时间不能早于结束时间',
							icon: 'none'
						});
					} else if (this.endAllTime - this.startAllTime <= 1800000) {
						uni.showToast({
							title: '开播时间和结束时间间隔不得短于30分钟',
							icon: 'none'
						});
					} else if (this.endAllTime - this.startAllTime > 86400000) {
						uni.showToast({
							title: '开播时间和结束时间间隔不得超过24小时',
							icon: 'none'
						});
					} else if (this.startAllTime < new Date().getTime() + 600000) {
						uni.showToast({
							title: '开播时间需要在当前时间的十分钟后',
							icon: 'none'
						});
					} else if (this.startAllTime > new Date().getTime() + 15552000000) {
						uni.showToast({
							title: '开播时间开始时间不能在6个月后',
							icon: 'none'
						});
					} else if (data.anchorName == '') {
						uni.showToast({
							icon: 'none',
							title: '请填写用户昵称'
						});
					} else if (data.anchorWechat == '') {
						uni.showToast({
							icon: 'none',
							title: '请填写微信号'
						});
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg
						});
					}

					// if (res.data.errcode === 300036) {
					// 	let that = this;
					// 	uni.showModal({
					// 		title: '提示',
					// 		content: '若未实名在“小程序直播”小程序进行认证，需要先前往“小程序直播”小程序进行实名验证，是否立即前往',
					// 		success: function(res) {
					// 			if (res.confirm) {
					// 				that.moveToAppletlive();
					// 			} else if (res.cancel) {
					// 				console.log('用户点击取消');
					// 			}
					// 		}
					// 	});
					// }
					console.log('res', res);
				}
			});

			console.log('提交数据', data);
		}
	}
};
</script>

<style>
.box{
    overflow: hidden;
}
.livebox {
	position: relative;
}

.livebox .live-one {
	width: 6upx;
	height: 32upx;
	background-color: #00a625;
	margin-left: 32upx;
	margin-top: 30upx;
}

.livebox .live-cover {
	position: absolute;
	margin-left: 52upx;
	margin-top: -34upx;
	font-size: 30upx;
}

.Live-as-a-whole {
	width: 100%;
	height: 600upx;
	padding: 0 28upx;
}

.ofthecovertw {
	position: relative;
	width: 340upx;
}

.ofthecovertwshare {
    position: relative;
	border-radius: 15px;
	width: 340upx;
	margin-top: -398upx;
	margin-left: 390upx;
}

.live-img-one {
	margin-top: 46upx;
	width: 100%;
	height: 500upx;
	background-color: #efefef;
	border-radius: 15upx;
}

.live-img {
	width: 340upx;
	height: 340upx;
	margin-top: -114upx;
	margin-left: -30upx;
	background-color: #efefef;
	border-radius: 15upx;
}

.ofthecover {
	position: absolute;
	width: 82upx;
	height: 68upx;
	margin-left: 110upx;
	top: 14upx;
	z-index: 888;
}

.ofthecover-to {
	position: absolute;
	margin-left: 64upx;
	margin-top: 280upx;
	color: #000000;
	font-size: 34upx;
	z-index: 999;
}

.ofthecover-one {
	position: absolute;
	width: 82upx;
	height: 68upx;
	margin-left: 136upx;
	top: 272upx;
	z-index: 888;
}

.ofthecoverone {
	position: absolute;
	margin-left: 44upx;
	margin-top: 26upx;
	color: #000000;
	font-size: 34upx;
	z-index: 9999;
}

.livebox .Livetheme {
	margin-top: 30upx;
	margin-left: 30upx;
	background-color: #f2f2f2;
}

.Livetheme-one {
	width: 704upx;
	height: 206upx;
	background-color: #f2f2f2;
	margin-top: 30upx;
	margin-left: 24upx;
}

.Livetheme-one .Livetheme-tow {
	width: 690upx;
	height: 206upx;
	color: #999999;
	font-size: 28upx;
	padding-top: 20upx;
	box-sizing: border-box;
	margin-left: 20upx;
	white-space: nowrap;
	overflow: hidden;
}

.Livetime {
	margin-top: 30upx;
	width: 750upx;
	height: 260upx;
	border-bottom: 20upx solid #f5f6f9;
	border-top: 20upx solid #f5f6f9;
}

.Livetime .Livetimeone {
	width: 6upx;
	height: 32upx;
	background-color: #00a625;
	margin-left: 32upx;
	margin-top: 30upx;
}

.Livetime .LivetimeThesolidline {
	width: 692upx;
	height: 2upx;
	background-color: #dedede;
	margin-top: 20upx;
	margin-left: 30upx;
}

.Livetime .Livetimetow {
	position: absolute;
	margin-left: 52upx;
	margin-top: -34upx;
	font-size: 30upx;
}

.Livetime .Thestarttime {
	color: #666666;
	margin: 22upx 8upx 22upx 30upx;
	width: 712upx;
	height: 40upx;
	font-size: 28upx;
}

.Livetime .Thestarttime .uni-input {
	line-height: 40upx;
	width: 170upx;
	margin-left: 424upx;
	margin-top: -34upx;
}

.Livetime .Thestarttime .uni-inputone {
	line-height: 40upx;
	margin-left: 594upx;
	margin-top: -40upx;
}

.Broadcastinformation {
	width: 100%;
	height: 500upx;
}

.Broadcastinformation .Broadcastname {
	position: absolute;
	color: #000000;
	font-size: 30upx;
	margin-left: 312upx;
	margin-top: 36upx;
}

.Broadcastinformation .Broadcastportrait {
	position: absolute;
	width: 109upx;
	height: 111upx;
	margin-top: 100upx;
	margin-left: 312upx;
}

.Broadcastinformation .Broadcastportrait .Broadcastportraitimg {
	z-index: 888;
	position: absolute;
	width: 109upx;
	height: 111upx;
	margin-left: 10upx;
}

.Broadcastinformation .Broadcastportrait .Picturesuploaded {
	z-index: 9999;
}

.Broadcastinformation .Theusernickname {
	position: absolute;
	padding-left: 10upx;
	box-sizing: border-box;
	margin-top: 282upx;
	margin-left: 30upx;
	font-size: 30upx;
}

.Broadcastinformation .Theusernickinput {
	position: absolute;
	width: 514upx;
	height: 76upx;
	background-color: #f2f2f2;
	margin-top: 254upx;
	z-index: 9;
	margin-left: 196upx;
	color: #333333;
	font-size: 30upx;
}

.Broadcastinformation .WeChatID {
	position: absolute;
	margin-top: 370upx;
	margin-left: 38upx;
	font-size: 30upx;
}

.Broadcastinformation .pleaseWeChatID {
	z-index: 9;
	position: absolute;
	width: 514upx;
	height: 76upx;
	background-color: #f2f2f2;
	margin-top: 358upx;
	margin-left: 196upx;
}

.Broadcastinformation .meWeChatID {
	position: absolute;
	color: #9cbade;
	font-size: 30upx;
	margin-top: 446upx;
	margin-left: 184upx;
}

.courseone {
	width: 95%;
	margin-left: 20upx;
	border-radius: 15upx;
	margin-top: 30upx;
	border: 2upx solid #cccccc;
}

.wxme {
	margin-left: 30upx;
	margin-top: 50upx;
	font-size: 30rpx;
	color: #666;
}

.WeChatguide {
	width: 100%;
	height: 130upx;
}

.WeChatguideimgone {
	width: 95%;
	height: 130upx;
	margin-left: 20upx;
	margin-top: 30upx;
}
.searchLiveImg{
    width: 90%;
    height: 400upx;
    margin-left: 20upx;
    margin-top: 30upx;
}

.WeChatguideone {
	position: relative;
}

.Thesecondstep {
	color: #666;
	font-size: 30upx;
	margin-top: 50upx;
	margin-left: 30upx;
}

.WeChatguideimg {
	width: 95%;
	height: 408upx;
	margin-left: 20upx;
	margin-bottom: 50upx;
}
.Applyforlivebox{
    width: 100%;
    height: 120upx;
}
.Applybutton {
	width: 670upx;
	height: 86upx;
	border-radius: 22px;
	text-align: center;
	line-height: 86upx;
	color: #ffffff;
	font-size: 32upx;
	background: linear-gradient(#cbec00, #00a66a);
	box-shadow: 0 8upx 16upx #00a66a;
    margin-left: 40upx;
	margin-top: 30upx;
	margin-bottom: 30upx;
    padding-bottom: 40upx;
    box-sizing: border-box;
}
</style>
